import React, { useCallback, useEffect, useState } from 'react';
import { DatePicker, Select, Button, List, Modal, message, Form, ConfigProvider } from 'antd';
import './selects.scss';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/locale/zh_CN';
const { Option } = Select;
const { RangePicker } = DatePicker;

export default function Selects(props) {
    function onChange(dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    }
    return (
        <div className="selects">

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex' }}>
                    {
                        props.arr.map(item => {
                            return (
                                <div key={item.name}>
                                    <label>{item.name}</label>

                                    <Select
                                        onSelect={item.handleChange}
                                        placeholder="请选择"
                                        disabled={item.state ? false : true}
                                    >
                                        {
                                            !item.state ? '' :
                                                item.state.map(it => {
                                                    return (
                                                        <Option key={it.id} value={it.name ? it.name : (it.layer ? it.layer : (it.number ? it.number : '请选择'))}>{it.name ? it.name : (it.layer ? it.layer : (it.number ? it.number : ''))}</Option>
                                                    )
                                                })
                                        }
                                    </Select>

                                </div>
                            )
                        })
                    }
                </div>
                {
                    !props.btn ? '' :
                        <Button type="primary" shape="round" onClick={props.btn.event} disabled={props.btn.isDisabled}>
                            {
                                props.btn.text
                            }
                        </Button>
                }
            </div>
            {
                !props.date ? "" :
                    <div style={{ marginTop: 20 }}>
                        <ConfigProvider locale={locale}>
                            <RangePicker size='default'
                                onChange={onChange}
                                ranges={{
                                    '今天': [moment(), moment()],
                                    '最近一周': [moment().startOf('week'), moment().endOf('week')],
                                    '最近一个月': [moment().startOf('month'), moment().endOf('month')],
                                    '最近三个月': [moment(new Date()).subtract(3, 'months'), moment().endOf('month')]
                                }}
                            />
                        </ConfigProvider>
                    </div>
            }
        </div>
    )
}



